<template>
    <div id="login">
        <div class="loginBox">
            <div class="loginText"><img src="../../assets/image/login.png" width="110" height="52" alt="">
            <p>悦途自媒体平台</p></div>
            <div class="loginMainbox">
              <div class="loginoption clearfix">
                  <div class="loginoptionl"><img src="../../assets/image/loginname2.png" />密码登录 <span>|</span></div>
                  <div class="loginoptionr" @click="goqrcode"><img src="../../assets/image/loginwx.png" />微信登录</div>
              </div>
            <div class="loginMain">
                <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" class="demo-ruleForm">
                    <el-form-item prop="user">
                        <el-input v-model.number="ruleForm2.user" placeholder="手机号"></el-input>
                    </el-form-item>
                    <el-form-item prop="pass">
                        <el-input type="password" v-model="ruleForm2.pass" auto-complete="off" placeholder="密码"></el-input>
                    </el-form-item>
                    <!--滑动验证-->
                    
                    <el-form-item class="btnBox">
                        <el-button type="primary" @click="postPassword(ruleForm2)" class="loginBtn">登录</el-button>
                    </el-form-item>
                </el-form>
                <div class="attention">
                    <!--<el-checkbox v-model="checked" class="ckBox">记住密码</el-checkbox>-->
                    <div class="links clearfix">
                    <p> <router-link to="/register">注册</router-link></p>
                    <p><router-link to="/backpassword">忘记密码</router-link> |</p>
                    </div>
                </div>

            </div>
            </div>
            <div class="loginOther"></div>
        </div>
    </div>
</template>

<script>
    import {commonService} from '../../service/commonService'
    export default {
        data() {
            let checkUser = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('账号不能为空'));
                }else{
                    callback();
                }
            };
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            };
            return {
                checked: true,
                geetestInfo: {},
                ruleForm2: {
                    pass: '',
                    geetesst: false,
                    user: ''
                },
                rules2: {
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    user: [
                        { validator: checkUser, trigger: 'blur' }
                    ],
                }
            };
        },
        mounted:function(){
                 // this.postPassword()
                 let that=this
                 if(localStorage.token !=null && localStorage.token!=''){
                   that.$router.push({path:'/'})
                 }
        },
        methods: {
            goqrcode:function(){
                 this.$router.push({path:"/qrcode"})
            },
             postPassword:function(ruleForm2){
                 let that=this

                  if(ruleForm2.user==''){
             
                 that.$message.error("请填写手机号码");
                   return false
                }
                  let reg = /^1[3|4|5|7|8][0-9]{9}$/;
                    let flag = reg.test(ruleForm2.user)
                    if(!flag){
                     
                        that.$message.error("手机号码不正确");
                        return false
                    }
                   if(ruleForm2.pass==''){
                       
                        that.$message.error("请填写密码");
                            return false
                          }
                     let re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
                    let fla = re.test(ruleForm2.pass)
                    if(!fla){
                       that.$message.error("密码为字母、数字、组合且长度为6-20的字符");
                        return false
                       }

                commonService.postPassword({phone:ruleForm2.user,password:ruleForm2.pass,platform:'ADMIN_PC'}).then(function(res){
                    if(res.data.code == 200){
                       
                        window.localStorage.setItem('token',res.data.datas)
                       that.$router.push({path:'/'})
                    }else{
                     
                         that.$message.error(res.data.message);
                    }
              })
            },
        }
    }
</script>

<style lang="less" scoped>
#login{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    background:#2d3a4b url(../../assets/image/car-publisher/bg.png) center center no-repeat;
    background-size: auto 100%;
    display: flex; justify-content: center; align-items: center;
    .loginBox{
        width: 400px;
        height: 458px;
        // background: #fff;
        .loginText{
            width: 400px;
            font-size: 26px;
            font-weight: bold;
            color: #eee;
            margin:20px auto;
            text-align: center;
            p{
              font-size: 14px;
              line-height: 20px;
              margin-top: 10px;
              color: #666;
            }
        }
        .loginMainbox{
             width: 400px;
             height: 336px;
             background: #fff;
             .loginoption{
                 padding-top: 30px;
                 margin-bottom: 40px;
                 width: 400px;
                 .loginoptionl{
                     float: left;
                     width: 50%;
                     font-size: 14px;
                     line-height: 20px;
                     color: #333;
                     text-align: right;
                     cursor: pointer;
                     img{
                        width: 14px;
                        height: 16px;
                        margin-right: 5px;
                        margin-top: 2px;
                     }
                     span{
                         margin-left: 15px;
                     }
                 }
                 .loginoptionr{
                     float: left;
                     text-align: left;
                     width: 50%;
                     font-size: 14px;
                     line-height: 20px;
                     color: #bbb;
                     cursor: pointer;
                     img{
                        width: 16px;
                        height: 14px;
                        margin: 3px 5px 0 15px;
                     }
                 }
             }
        .loginMain{
          width: 286px; margin: 0 auto;

          .attention{
            .links{font-size: 12px; color:#666;p{float: right;margin-left: 5px;font-size: 12px;line-height: 17px;color: #666;}}
          }
        }
       }
    }
}
.loginBtn{
    width:100%;
    border-radius: 20px;
}

#captcha-box{
    width:286px;
    height:44px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
    margin-bottom:30px;
    float:right;
    overflow: hidden;
}
.btnBox{clear:both;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius: 20px;}
</style>